<template>
  <div class="source-container">
    <div class="source-container-operation">
      <t-button @click="onOpenCreate"> {{ $t('create') }}</t-button>
      <div class="search-input">
        <t-input :placeholder="$t('layout.searchPlaceholder')" clearable @enter="onSearch">
          <template #suffix-icon>
            <steve-icon name="search" />
          </template>
        </t-input>
      </div>
    </div>
    <div class="source-container steve-body">
      <div class="source-container-wrapper">
        <div class="source-container-operator">
          <t-input
            v-model="searchCategoryText"
            :placeholder="$t('layout.searchPlaceholder')"
            @change="onSearchCategory"
          >
            <template #suffix-icon>
              <steve-icon name="search" />
            </template>
          </t-input>
          <div class="source-container-list">
            <t-tree
              :data="categoryList"
              :activable="true"
              :hover="true"
              :filter="searchCategoryByText"
              :keys="{ value: 'groupId', label: 'groupName' }"
              @active="onActiveCategory"
            />
          </div>
        </div>
        <div class="source-container-content">
          <source-list :keyword="searchText" :group-id="groupId" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { TreeNodeModel } from 'tdesign-vue-next';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

import { ApiSiteCategoryList } from '@/api/api';
import steveIcon from '@/components/steveIcon/index.vue';
import SourceList from '@/pages/source/list/components/list.vue';

const router = useRouter();

const searchText = ref();
const searchCategoryByText = ref();
const searchCategoryText = ref();
const categoryList = ref([]);
const groupId = ref();

/**
 * 打开创建
 */
const onOpenCreate = () => {
  router.push(`/source/edit`);
};

// 搜索分类
const onSearchCategory = () => {
  searchCategoryByText.value = (node: TreeNodeModel) => {
    return node.label.indexOf(searchCategoryText.value) >= 0;
  };
};

// 点击分类事件
const onActiveCategory = (value: any) => {
  // eslint-disable-next-line prefer-destructuring
  groupId.value = value[0];
};

// 搜索
const onSearch = (value: any) => {
  searchText.value = value;
};

// 获取数据
function getApiCategory() {
  ApiSiteCategoryList().then((data) => {
    if (data.length > 0) {
      categoryList.value = data;
    }
  });
}

getApiCategory();
</script>

<style lang="less" scoped>
.source-container {
  &-operation {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--td-comp-margin-xxl);

    .search-input {
      width: 360px;
    }
  }

  &-wrapper {
    overflow-y: hidden;
  }

  &-operator {
    width: 260px;
    float: left;
    padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
  }

  &-list {
    margin-top: var(--td-size-7);
  }

  &-content {
    border-left: 1px solid var(--td-border-level-1-color);
    overflow: auto;
  }
}
</style>
